<style lang='less' scoped>
  .lib-wrap{
    min-height:100vh;
    .lib-top{
      width: 100%;
      height: 480rpx;
      position:relative;
      .lib-top-bg{
        width:100vw;
        position: absolute;
        left: 0;
        z-index:-1;
      }
      .lib-top-idet{
        width:44rpx;
        height:44rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;
      }
      .user-name{
        font-size:32rpx;
      }
      .user-phone{
        color:#A9A9A9;
        font-size:30rpx;
      }
      .user-img-wrap{
        .user-img{
          width:120rpx;
          height:120rpx;
          border:4rpx solid #EC681F;
          border-radius: 60rpx;
        }
      }
      .cut-lib{
        width:100vw;
        background:#fff;
        position:absolute;
        bottom:0;
        left: 0;
        padding:10rpx auto;
        .walit{
          width:44rpx;
          height:44rpx;
        }
        .num{
          font-size:52rpx;
        }
        .cut-line{
          color:#D6D6D6;
        }
        .text{
          font-size:28rpx;
          color:#575757
        }
      }
    }
    .lib-main{
      background: #EFEFF4;
      padding-bottom:40rpx;
      .lib-order{
        ul{
          padding:40rpx 10rpx 20rpx 20rpx;
          .order-text{
            color:#A9A9A9;
            font-size:32rpx;
            img{
              width:44rpx;
              height:44rpx;
            }
          }
        }
      }
      .lib-menu{
        background: #fff;
        padding: 10rpx 50rpx 10rpx 50rpx;
        .menu-img{
          width:90rpx;
          height:90rpx;
        }
        .menu-text{
          color:#575757;
          font-size:32rpx;
        }
      }
      .lib-list{
        padding: 10rpx 20rpx;
        margin-top:20rpx;
        background: #fff;
        .main-pic{
          width:90rpx;
          height:90rpx;
        }
        .text{
          font-size:38rpx;
          color:#575757;
        }
        .more{
          width:44rpx;
          height:44rpx;
        }
      }
    }
  }
</style>
<template>
  <div>
    <div class="lib-wrap">
      <div class="lib-top">
        <img class="lib-top-bg" src="../../static/image/me/main/1(20).png">
        <img class="lib-top-idet" src="../../static/image/me/main/1(11).png">
        <ul class="flex column item-center">
          <li class="user-img-wrap">
            <img class="user-img" src="../../static/image/me/main/1(23).png">
          </li>
          <li class="user-name main-color">风中的雨</li>
          <li class="user-phone">17603006126</li>
          <li class="cut-lib flex row justify-around">
            <ul class="flex row item-center">
              <li class="flex column item-end" style="margin-right:22rpx;">
                <img class="walit" src="../../static/image/me/main/1(5).png">
              </li>
              <li class="num main-color">2200</li>
              <li class="text" style="margin-left:12rpx;">积分</li>
            </ul>
            <div class="cut-line">|</div>
            <ul class="flex row item-center">
              <li style="margin-right:22rpx;">
                <img class="walit" src="../../static/image/me/main/1(8).png">
              </li>
              <li class="num main-color">2200</li>
              <li class="text" style="margin-left:12rpx;">优惠券</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="lib-main">
        <div class="lib-order">
          <ul class="flex row justify-between">
              <li class="order-text">我的订单</li>
              <li class="order-text flex row item-center">
                <p>查看全部订单</p>
                <img src="../../static/image/me/main/1(35).png">
              </li>
          </ul>
        </div>
        <div class="lib-menu">
          <ul class="flex row item-center justify-between">
              <li class="flex column item-center" v-for='(item,index) in orderMenuList' :key='index'>
                <img class="menu-img" :src="item.src">
                <p class="menu-text">{{item.text}}</p>
              </li>
          </ul>
        </div>
        <div class="lib-list" v-for='(item,index) in libList' :key='item.src'>
          <ul class="flex row item-center justify-between">
              <li class="flex row item-center">
                <img class="main-pic" :src="item.src">
                <p class="text">{{item.text}}</p>
              </li>
              <li class="flex column item-center">
                <img class="more" src="../../static/image/me/main/1(35).png">
              </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      libList:[
        {
          src:require('../../static/image/me/main/1(53).png'),
          text:"我的车库"
        },
        {
          src:require('../../static/image/me/main/1(47).png'),
          text:"加盟城市代理"
        },
        {
          src:require('../../static/image/me/main/1(50).png'),
          text:"意见反馈"
        }
      ],
      orderMenuList:[
        {
          src:require('../../static/image/me/main/1(2).png'),
          text:"待支付"
        },
        {
          src:require('../../static/image/me/main/1(38).png'),
          text:"服务中"
        },
        {
          src:require('../../static/image/me/main/1(41).png'),
          text:"待评价"
        },
        {
          src:require('../../static/image/me/main/1(44).png'),
          text:"售后"
        }
      ]
    }
  },
  mounted(){
    wx.showModal({
      title:"温馨提示",
      content:"您的钱包掉了！",
      confirmColor:"#EC681F"
    })
  },
  components: {
  },

  methods: {
  }
}
</script>


